import React, {Component} from 'react';
import Service from "./Service";
import Lng from "../common/lng";
import {Form, Input, InputNumber, Select} from "antd";

class AddIntervalForm extends Component {

    state = {
        dTypes: []
    }

    componentDidMount() {
        const self = this;
        Service.listTypes((types) => {
            self.setState({
                dTypes: types.data
            });
        })
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            }
        };
        const {dTypes} = this.state;
        const self = this;
        return (
            <Form>
                <Form.Item
                    className={"hide"}
                >
                    {getFieldDecorator('preDishName', {
                        rules: [{
                            required: false
                        }],
                    })(
                        <Input/>
                    )}
                </Form.Item>
                <Form.Item
                    className={"hide"}
                >
                    {getFieldDecorator('nextDishName', {
                        rules: [{
                            required: false
                        }],
                    })(
                        <Input/>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("dishTypeInterval.preDish")}
                >
                    {getFieldDecorator('preDishCode', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.select", {some: Lng.get("dishTypeInterval.preDish")})
                        }],
                        onChange: (value, obj) => {
                            self.props.form.setFieldsValue({
                                preDishName: obj.props.children
                            });
                        }
                    })(
                        <Select>
                            {
                                dTypes.map((t) => {
                                    return <Select.Option key={"".uuid()} value={t.code}>{t.name}</Select.Option>
                                })
                            }
                        </Select>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("dishTypeInterval.nextDish")}
                >
                    {getFieldDecorator('nextDishCode', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.select", {some: Lng.get("dishTypeInterval.nextDish")})
                        }],
                        onChange: (value, obj) => {
                            self.props.form.setFieldsValue({
                                nextDishName: obj.props.children
                            });
                        }
                    })(
                        <Select>
                            {
                                dTypes.map((t) => {
                                    return <Select.Option key={"".uuid()} value={t.code}>{t.name}</Select.Option>
                                })
                            }
                        </Select>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("dishTypeInterval.interval")}
                >
                    {getFieldDecorator('constraintTime', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.placeholder", {some: Lng.get("dishTypeInterval.interval")})
                        }],
                    })(
                        <InputNumber min={0}/>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("dishTypeInterval.intervalUnit")}
                >
                    {getFieldDecorator('constraintTimeUnit', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.select", {some: Lng.get("dishTypeInterval.intervalUnit")})
                        }],
                    })(
                        <Select style={{width: 90}}>
                            <Select.Option key={"".uuid()} value={"H"}>{Lng.get("common.H")}</Select.Option>
                            <Select.Option key={"".uuid()} value={"M"}>{Lng.get("common.M")}</Select.Option>
                            <Select.Option key={"".uuid()} value={"S"}>{Lng.get("common.S")}</Select.Option>
                        </Select>
                    )}
                </Form.Item>
            </Form>
        )
    }
}

const _AddIntervalForm = Form.create()(AddIntervalForm);
export default _AddIntervalForm;
